<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
<head>
    <meta charset="utf-8">
    <title>个人信息</title>
    <link rel="stylesheet" href="./layui/css/layui.css" media="all">
    <script src="./js/jquery.min.js"></script>
    <script src="./js/axios.min.js"></script>
</head>
<body>
<fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
    <legend>个人信息</legend>
</fieldset>
<form target="_parent" id="myForm" action="/user?type=editInfo" method="post" class="layui-form">
    <!-- 提示：如果你不想用form，你可以换成div等任何一个普通元素 -->
    <input type="hidden" id="uid" name="uid" value="${loginUser.userId}">
    <div class="layui-form-item">
        <label class="layui-form-label">用户名</label>
        <div class="layui-input-block">
            <input type="text" id="uname" name="uname" value="${loginUser.userName}" placeholder="请输入"
                   autocomplete="off" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">密码</label>
        <div class="layui-input-block">
            <input type="text" id="upwd" name="upwd" value="${loginUser.userPwd}" placeholder="请输入" autocomplete="off"
                   class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">电话</label>
        <div class="layui-input-block">
            <input type="text" id="utel" name="utel" value="${loginUser.userTel}" placeholder="请输入" autocomplete="off"
                   class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">邮箱</label>
        <div class="layui-input-block">
            <input type="text" id="uemail" name="uemail" value="${loginUser.userEmail}" placeholder="请输入"
                   autocomplete="off" class="layui-input">
        </div>
    </div>
    <input type="hidden" id="roleId" name="roleId" value="${loginUser.role.roleId}">
    <div class="layui-form-item">
        <label class="layui-form-label">权限</label>
        <div class="layui-input-block">
            <input type="text" value="${loginUser.role.roleName}" readonly autocomplete="off" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <div class="layui-input-block">
            <button id="btn" type="button" class="layui-btn">立即提交</button>
            <button type="reset" class="layui-btn layui-btn-primary">重置</button>
        </div>
    </div>
    <!-- 更多表单结构排版请移步文档左侧【页面元素-表单】一项阅览 -->
</form>

<script src="./layui/layui.js"></script>
<script>
    layui.use('form', function () {
        var form = layui.form;

        //各种基于事件的操作，下面会有进一步介绍
    });
</script>

<script>
    let myForm = $("#myForm");
    let btn = $("#btn");
    let uid = $("#uid");
    let uname = $("#uname");
    let upwd = $("#upwd");
    let utel = $("#utel");
    let uemail = $("#uemail");
    let roleId = $("#roleId");
    btn.on("click", function () {
        if (uname.val() === "" || upwd.val() === "") {
            alert("用户名和密码不可为空");
            return;
        } else {
            // alert(utel.val() === "");
            if (utel.val() !== "" && utel.val().length !== 11) {
                alert("手机号请输入正确格式");
                return;
            }
        }
        alert("校验用户名~");
        axios.get("/user?type=checkMyName", {
            params: {
                uid: uid.val(),
                uname: uname.val()
            }
        }).then(res => {
            if (res.data == null) {
                console.log("修改成功");
                alert("修改成功");
                alert("即将退出登录");

                myForm.submit();
            } else {
                console.log("该用户名已被使用，请修改！");
                alert("该用户名已被使用，请修改！");
            }
        }).catch(error => {
            console.log("出错：" + error);
        });
    });
</script>
</body>
</html>